<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org"-->
<!--      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro" >-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash;<img src="../my.jpg">&ndash;&gt;-->

<!--<h1>首页</h1>-->
<!--<p th:text="${msg}"></p>-->
<!--<hr>-->
<!--<a th:href="@{/toLogin}">登录</a>-->
<!--<hr>-->
<!--<div shiro:hasPermission="User:add">-->
<!--<a th:href="@{/User/add}">add</a>-->
<!--</div>-->
<!--    |-->
<!--<div shiro:hasPermission="User:update">-->
<!--<a th:href="@{/User/update}">update</a>-->
<!--</div>-->
<!--&lt;!&ndash;<a th:href="@{/User/add}">add</a>  |  <a th:href="@{/User/update}">update</a>&ndash;&gt;-->
<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--      引入js-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--
        引入bootstrap相关的头文件
        1. div布局容器  class = " container"
        2. 放8行 row
    -->
</head>

<body >
<!--最外层的布局容器-->
<div class="container" style="background-color: gray">

    <!--导航栏部分-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">首页</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a th:href="@{/book/bookList}">书籍商城</a>
                    </li>
                    <li>
                        <a th:href="@{/book/addbook}">添加书籍</a>
                    </li>
                    <li>
                        <a href="#">鞋靴箱包</a>
                    </li>
                    <li>
                        <a href="#">香烟酒水</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a href="#">手机数码</a>
                            </li>
                            <li>
                                <a href="#">电脑办公</a>
                            </li>
                            <li>
                                <a href="#">鞋靴箱包</a>
                            </li>

                        </ul>
                    </li>

                    <li>
                        <a th:href="@{/toLogin}">登录</a>
                    </li>

                    <li>
                        <a th:href="@{/register}" >注册</a>
                    </li>
                </ul>


            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <div class="row" th:height="200px" >
        <div class="col-md-12">
            <!--轮播图-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="../img/one.jpg"  width="10%" height="10%"alt="...">
                        <div class="carousel-caption">

                        </div>
                    </div>
                    <div class="item">
                        <img src="../img/one.jpg" width="10%" height="10%" alt="...">
                        <div class="carousel-caption">
                            动漫2
                        </div>
                    </div>
                    <div class="item">
                        <img src="../img/two.jpg" width="10%" height="10%" alt="...">
                        <div class="carousel-caption">
                            动漫1
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row">
        <span id="" style="font-size: 30px;padding-left:33px;">
            热门商品   <img src="title2.jpg">
        </span>
        </div>
        <div class="row">
            <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;">
                <img src="big01.jpg" height="100%">
            </div>
            <div class="col-md-10 col-sm-10" style="padding-left: 10px;">
                <div class="row">
                    <div class="col-md-6 hidden-xs hidden-sm" style="height:200px;width: 480px;">
                        <a href="#"><img src="middle01.jpg" height="100%" width="100%"></a>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6" align="center">
                        <a href="#"><img src="small03.jpg"></a>
                        <a href="#"><p><font color="gray">电炖锅</p></a>
                        <p><font color="red">￥399</font></p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div style="text-align: center;">

        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">招贤纳士</a>
        <a href="#">法律声明</a>
        <a href="#">友情链接</a>
        <a href="#">支付方式</a>
        <a href="#">配送方式</a>
        <a href="#">服务声明</a>
        <a href="#">广告声明</a>

        <br />

        Copyright © 2005-2016 传智商城 版权所有
    </div>

</div>
</body>

</html>
